<template>
    <div class="topinfo">
        <baseloyal ref="tongji" icon="icon-tongji" title-text="语音统计" style="flex: 1.3 0 auto;">
            <div class="tongji pl">
                <div>排队人数：{{voiceLineUp}}人</div>
                <div>语音平均通话时长：{{voiceALTime}}s</div>
            </div>
            <div class="tongji pr">
                <div>语音人工接听量：{{voiceTimes}}</div>
                <div>语音平均等待时长：{{voiceAWTime}}s</div>
            </div>
        </baseloyal>

        <baseloyal icon="icon-portal" title-text="总体情况" style="flex: 0.8 0 auto;">
            <div class="pl portal">
                <div class="portall">语音总量</div>
                <div class="portalr">{{formatterVoiceTotal}}</div>
            </div>
            <div class="pr portal">
                <div class="portall">在线总量</div>
                <div class="portalb">{{formatterOnlineTotal}}</div>
            </div>
        </baseloyal>

        <baseloyal icon="icon-measure-the-seat" title-text="在线客服统计" style="flex: 0.9 0 auto;">
            <div class="tongji pl">
                <div>咨询量：{{onlineAcAm}}</div>
                <div>正在排队人数：{{wordsLineUp}}</div>
            </div>
            <div class="tongji pr">
                <div>接通率：{{onlineRate}}%</div>
            </div>
        </baseloyal>
    </div>
</template>

<script>
    import baseloyal from './topinfoParts/baseloyal'
    import api from '../../api'
    export default {
        name: "topinfo",
        data(){
            return {
                voiceLineUp:0,  //语音排队数
                wordsLineUp:0,  //文字排队数

                voiceTimes:0,   //语音人工接听量
                voiceTotal:0,   //语音总量
                voiceALTime:0,  //语音平均通话时长
                voiceAWTime:0,  //语音平均等待时长
                onlineTotal:0,  //在线接入总量
                onlineRate:0,   //在线接通率
                onlineAcAm:0,   //在线咨询量

            }
        },
        created(){
            this.refresh();
        },
        components:{
            baseloyal
        },
        /*mounted(){
            console.log(this.$refs.tongji)
        },*/
        methods:{
            refresh(){
                this.getLineUpByMedia();
                this.getHistoryByMedia();
            },
            //刷新排队数
            async getLineUpByMedia(){
                let obj = await api.getLineUpByMedia();
                this.voiceLineUp = obj.v;
                this.wordsLineUp = obj.w;
            },

            //刷新语音接入总量、语音人工接通量、语音平均通话时长、语音平均等待时长、在线接入总量、在线会话量、在线接通率
            async getHistoryByMedia(){
                let obj = await api.getHistoryByMedia();
                this.voiceTimes = obj.voiceTimes;
                this.voiceTotal = obj.voiceTotal;
                this.voiceALTime = obj.voiceALTime;
                this.voiceAWTime = obj.voiceAWTime;
                this.onlineTotal = obj.onlineTotal;
                this.onlineRate = obj.onlineRate;
                this.onlineAcAm = obj.onlineAcAm;
                    /*voiceTotal:0,   //语音总量
                    voiceALTime:0,  //语音平均通话时长
                    voiceAWTime:0,  //语音平均等待时长
                    onlineTotal:0,  //在线接入总量
                    onlineRate:0,   //在线接通率
                    onlineAcAm:0,   //在线咨询量*/

            },

            //格式化数字  如 1568541 => 1,568,541
            formatterNum(num){
                let str = num + '';
                let arr = str.split('').reverse();
                let rel = [];
                arr.forEach((item,index)=>{
                    if(index%3==0 && index!=0){
                        rel.unshift(item+',')
                    }else {
                        rel.unshift(item)
                    }
                })
                return rel.join('');
            }
        },
        computed:{
            formatterVoiceTotal(){
                return this.formatterNum(this.voiceTotal);
            },
            formatterOnlineTotal(){
                return this.formatterNum(this.onlineTotal);
            },
        }
    }
</script>

<style lang="less" scoped>
    .topinfo{
        border: 1px solid #253c70;
        height: 68px;
        background: url("../images/libg.png") repeat-x;
        display: flex;
        &>div{
            flex: 1 0 auto;
        }
        .pl,.pr{
            flex: 1 1 auto;
            width: 0;
        }
        .tongji,.portal{
            color: #fff;
            font-size: 16px;
            line-height: 28px;
            white-space: nowrap;
        }
        .portal{
            text-align: center;
            .portalr{
                font-size: 20px;
                color: #58e1f4;
            }
            .portalb{
                font-size: 20px;
                color: #3cd16c;
            }
        }

    }
</style>
